<template>
    <!-- 图层管理 -->
    <div id="box">
        <div class="coverage" id="singleProperty" v-if="type != ''" :style="{ left: boxX, right: boxY }">
            <div class="coverageTitle" @mousedown="mousedown" @mouseup="mouseup" @mouseout="mouseup">
                <div class="coverageTitleName">
                    <!-- <img class="btnsImages" src="@/assets/image/btns/layer.png" alt="" /> -->
                    <i class="el-icon-edit-outline"></i>
                    <span>属性编辑</span>
                </div>
                <i class="el-icon-close closeIcon" title="关闭" @click="setCoverage"></i>
            </div>
            <div class="propertyBox">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <div class="propertyDiv" v-if="type == 'box'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm v-show="show1" @blurUnit="blurUnit" :cascader="cascader" :data="config.rectangle.data1" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>边框信息</div>
                        <tableForm v-show="show2" :data="config.rectangle.data2" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show3 == true ? (show3 = false) : (show3 = true)">-</span>填充信息</div>
                        <tableForm v-show="show3" :data="config.rectangle.data3" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show4 == true ? (show4 = false) : (show4 = true)">-</span>体积信息</div>
                        <tableForm v-show="show4" v-if="refresh1" :data="config.rectangle.data4" :postData="postData" :optionData="optionData"></tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" :cascader="cascader" :data="config.rectangle.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'ellipse'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm v-show="show1" @blurUnit="blurUnit" :cascader="cascader" :data="config.column.data1" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>边框信息</div>
                        <tableForm v-show="show2" :data="config.column.data2" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show3 == true ? (show3 = false) : (show3 = true)">-</span>填充信息</div>
                        <tableForm v-show="show3" :data="config.column.data3" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show4 == true ? (show4 = false) : (show4 = true)">-</span>体积信息</div>
                        <tableForm v-show="show4" :data="config.column.data4" :postData="postData" :optionData="optionData"></tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" :cascader="cascader" :data="config.column.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'rectangle'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm v-show="show1" @blurUnit="blurUnit" @blurName="blurName" :cascader="cascader" :data="config.polygon.data1" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>边框信息</div>
                        <tableForm v-show="show2" :data="config.polygon.data2" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show3 == true ? (show3 = false) : (show3 = true)">-</span>填充信息</div>
                        <tableForm v-show="show3" :data="config.polygon.data3" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show4 == true ? (show4 = false) : (show4 = true)">-</span>面积信息</div>
                        <tableForm v-show="show4" @blurUnit="blurUnit" @changeUnit="changeUnit" :data="config.polygon.data4" :postData="postData" :optionData="optionData"></tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" :cascader="cascader" :data="config.polygon.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'circle'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm v-show="show1" @blurUnit="blurUnit" @blurName="blurName" :cascader="cascader" :data="config.round.data1" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>边框信息</div>
                        <tableForm v-show="show2" :data="config.round.data2" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show3 == true ? (show3 = false) : (show3 = true)">-</span>填充信息</div>
                        <tableForm v-show="show3" :data="config.round.data3" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show4 == true ? (show4 = false) : (show4 = true)">-</span>面积信息</div>
                        <tableForm v-show="show4" @blurUnit="blurUnit" @changeUnit="changeUnit" :data="config.round.data4" :postData="postData" :optionData="optionData"></tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" :cascader="cascader" :data="config.round.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'polygon'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm
                            v-show="show1"
                            @blurUnit="blurUnit"
                            @blurName="blurName"
                            :cascader="cascader"
                            :data="show5 ? config.cover.data12 : config.cover.data1"
                            :postData="postData"
                            :optionData="optionData"
                        ></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>边框信息</div>
                        <tableForm v-show="show2" :data="config.cover.data2" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show3 == true ? (show3 = false) : (show3 = true)">-</span>填充信息</div>
                        <tableForm v-show="show3" :data="config.cover.data3" :postData="postData" :optionData="optionData"></tableForm>
                        <div class="attribute_title"><span @click="show4 == true ? (show4 = false) : (show4 = true)">-</span>面积信息</div>
                        <tableForm
                            v-show="show4"
                            @blurUnit="blurUnit"
                            @changeUnit="changeUnit"
                            :data="show5 ? config.cover.data42 : config.cover.data4"
                            :postData="postData"
                            :optionData="optionData"
                        ></tableForm>
                        <div v-if="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-if="show5" @blurUnit="blurUnit" :cascader="cascader" :data="config.cover.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'polyline' || postData.type == 'curve'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm
                            v-show="show1"
                            @blurUnit="blurUnit"
                            @blurName="blurName"
                            :cascader="cascader"
                            :data="show5 ? config.line.data12 : config.line.data1"
                            :postData="postData"
                            :optionData="optionData"
                        ></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>线条信息</div>
                        <tableForm v-show="show2" @changeSlider="changeSlider" @blurUnit="blurUnit" @changeUnit="changeUnit" :data="config.line.data2" :postData="postData"></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>填充信息</div>
                        <tableForm
                            v-show="show3"
                            @changeSlider="changeSlider"
                            @blurUnit="blurUnit"
                            @changeUnit="changeUnit"
                            :data="config.line.data3"
                            :postData="postData"
                            :optionData="optionData"
                        ></tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>长度信息</div>
                        <tableForm v-show="show4" @blurUnit="blurUnit" @changeUnit="changeUnit" :data="show5 ? config.line.data5 : config.line.data4" :postData="postData"></tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" @blurUnit="blurUnit" :cascader="cascader" :data="config.line.statistical" :postData="postData"></tableForm>
                    </div>
                    <div class="propertyDiv" v-else-if="type == 'billboard'">
                        <div class="attribute_title"><span @click="show1 == true ? (show1 = false) : (show1 = true)">-</span>绘标式样</div>
                        <tableForm @blurUnit="blurUnit" v-show="show1" :optionData="optionData" :cascader="cascader" :data="config.dot.data1" :postData="postData">
                            <template slot="image">
                                <img @click="menuShow" :src="postData.image" alt="" class="billboard_img" />
                            </template>
                        </tableForm>
                        <div class="attribute_title"><span @click="show2 == true ? (show2 = false) : (show2 = true)">-</span>文字信息</div>
                        <tableForm v-show="show2" :data="config.dot.data2" :postData="postData.label" :optionData="optionData">
                            <template slot="name">
                                <el-input
                                    class="tableInput"
                                    @blur="blurName({ e: postData.label.name, prop: 'name' })"
                                    v-model="postData.label.name"
                                    style="padding: 0; width: 58%; margin: 2px 0 0 8px"
                                ></el-input>
                            </template>
                        </tableForm>
                        <div v-show="show5" class="attribute_title"><span @click="show5 == true ? (show5 = false) : (show5 = true)">-</span>统计信息</div>
                        <tableForm v-show="show5" :data="config.dot.statistical" :postData="postData" :optionData="optionData"></tableForm>
                    </div>
                    <div class="btn_footer" v-if="show5">
                        <el-button class="btn_item" @click="submitStatistical">保存</el-button>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <menuIcon v-show="menuIconIsShow" :url="postData.image" @imageUrl="imageUrl"></menuIcon>
    </div>
</template>
<script>
import editorware from '@/components/tool/utils/editorMiddleware.js'
import { mousedown, mouseup } from '../../utils/move.el'
// import { initMap } from '@/components/utils/initMap.js'
import { rectangle, column, polygon, round, cover, line, dot, optionData } from './singleData'
import { modify } from '@/utils/publicStyle'
import { initTreeData, treeData, coverageVm } from '../../coverage/utils/coverage.config'
import cMenu from '@/components/tool/contextMenu/utils/contextMenu.js'
import tableForm from '../components/table.vue'
import menuIcon from '../components/menuIcon.vue'
import * as turf from '@turf/turf'
// import Bus from '@/utils/bus.js'
export default {
    name: 'singleProperty',
    components: {
        tableForm,
        menuIcon
    },
    data() {
        return {
            type: '', // 属性类型
            optionData: { ...optionData },
            cascader: {}, // 级联数据
            config: { rectangle: { ...rectangle }, column: { ...column }, polygon: { ...polygon }, round: { ...round }, cover: { ...cover }, line: { ...line }, dot: { ...dot } }, // 字段数据
            show1: true,
            show2: true,
            show3: true,
            show4: true,
            show5: false,
            refresh1: true,
            // graphic: {}, //系统绘标数据
            postData: {
                label: { name: '' },
                color: ''
            }, // 绘标数据
            boxX: 0,
            boxY: 0,
            dialogVisible: false, // 批量
            isShow: false,
            isBatch: {
                outlineWidth: 2,
                width: 2,
                opacity: 2
            } // 是否批量修改
        }
    },
    computed: {
        singlePropertyIsShow() {
            return this.$store.state.singleProperty
        },
        menuIconIsShow() {
            return this.$store.state.menuIcon
        },
        movePoint() {
            return this.$store.state.editMovePoint
        },
        isDialog() {
            return this.$store.state.dialogVisible
        }
    },
    watch: {
        isDialog(newData) {
            if (newData == true) {
                this.dialogVisible = true
                this.$store.commit('setSingleProperty')
                this.type = 'polyline'
                this.$set(this.postData, 'type', 'polyline')
                this.show5 = true
            } else {
                this.show5 = false
                this.dialogVisible = false
            }
        },
        singlePropertyIsShow(newData) {
            this.boxX = '10px'
            this.boxY = '48px'
            if (newData && this.$store.state.dialogVisible == false) {
                this.isShow = true
                if (editorware.coverageMap.get(graphicId)) {
                    this.graphic = editorware.coverageMap.get(graphicId)
                } else {
                    this.graphic = editorware.rightClickData
                }
                if (this.type == 'polygon') {
                    delete this.graphic.options.style.height
                    if (this.graphic.options.style.zIndex) {
                        this.graphic.options.style.zIndex = 0
                    }
                }
                // console.log(this.graphic.type, 'graphic')
                this.singlePropertyData()
            } else if (newData == false) {
                this.isShow = false
                this.$store.state.dialogVisible = false
                this.postData = {
                    label: { name: '', color: '' },
                    outlineColor: '',
                    color: ''
                }
                // this.graphic = ''
            }
        },
        'postData.materialType': function(data) {
            if (this.isShow) {
                this.graphic.setStyle({ materialType: data })
                this.coverageEdit()
            }
        },
        'postData.type': function(data) {
            // 批量编辑
            if (this.$store.state.dialogVisible) {
                this.postData = {
                    label: { name: '', color: '' },
                    outlineColor: '',
                    color: '',
                    type: data
                }
                this.type = data
                if (this.$store.state.nodeId) {
                    const node = editorware.treeObj.getNode(this.$store.state.nodeId) // 获取图层信息
                    // console.log(node, 'node')
                    this.postData.layer = node.key
                }
                this.$request
                    .get('/api/map/draw/getDrawStats', {
                        folderId: this.$store.state.nodeId,
                        drawType: data
                    })
                    .then(res => {
                        if (res.code == 200) {
                            if (res.data.ERROR) {
                                this.$store.commit('setSingleProperty')
                                this.$message.error(res.data.ERROR)
                            } else {
                                if (data == 'polyline' || data == 'curve') {
                                    this.$set(this.postData, 'allDistance', res.data.allDistance)
                                    this.$set(this.postData, 'allTilt', res.data.allTilt)
                                    this.$set(this.postData, 'polylineNumber', res.data.polylineNumber)
                                    let a = res.data.allDistance * res.data.allTilt * 0.01
                                    this.$set(this.postData, 'allConstructionLength', a.toFixed(2))
                                } else if (data == 'polygon') {
                                    this.$set(this.postData, 'allArea', res.data.allArea)
                                    this.$set(this.postData, 'allTilt', res.data.allTilt)
                                    this.$set(this.postData, 'polygonNumber', res.data.polygonNumber)
                                    let a = res.data.allArea * res.data.allTilt * 0.01
                                    this.$set(this.postData, 'allConstructionArea', a.toFixed(2))
                                }
                            }
                        }
                    })
            }
        },
        'postData.width': {
            handler: function(data) {
                // 线宽
                if (this.isShow) {
                    this.graphic.setStyle({ width: data })
                    this.coverageEdit()
                }
            },
            immediate: false
        },
        'postData.color': {
            immediate: false,
            handler: function(data) {
                if (this.isShow) {
                    this.graphic.setStyle({ color: data })
                    if (this.type == 'polyline' || this.type == 'curve') {
                        this.graphic.setStyle({ label: { color: data } })
                    }
                    this.coverageEdit()
                }
            }
        },
        'postData.opacity': {
            immediate: false,
            handler: function(data) {
                if (this.isShow) {
                    // 透明度
                    this.graphic.setStyle({ opacity: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.clampToGround': {
            immediate: false,
            handler: function(data) {
                if (this.isShow) {
                    // 是否贴地
                    this.graphic.setStyle({ clampToGround: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.outline': {
            immediate: false,
            handler: function(data) {
                // 是否边框
                if (this.isShow) {
                    this.graphic.setStyle({ outline: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.fill': {
            immediate: false,
            handler: function(data) {
                // 是否填充
                // console.log(data)
                // return
                if (this.isShow) {
                    this.graphic.setStyle({ fill: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.outlineColor': {
            immediate: false,
            handler: function(data) {
                if (this.isShow) {
                    // 边框颜色
                    this.graphic.setStyle({ outlineColor: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.outlineWidth': {
            immediate: false,
            handler: function(data) {
                // 边框线宽
                if (this.isShow) {
                    this.graphic.setStyle({ outlineWidth: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.outlineOpacity': {
            immediate: false,
            handler: function(data) {
                // 边框透明度
                // console.log(data)
                if (this.isShow) {
                    this.graphic.setStyle({ outlineOpacity: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.rotationDegree': {
            immediate: false,
            handler: function(data) {
                // 旋转角度
                if (this.isShow) {
                    this.graphic.setStyle({ rotationDegree: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.scale': {
            immediate: false,
            handler: function(data) {
                // 大小比例
                if (this.isShow) {
                    this.graphic.setStyle({ scale: data })
                    this.coverageEdit()
                }
            }
        },
        'postData.label.font_family': {
            immediate: false,
            handler: function(data) {
                // 字体
                if (this.isShow) {
                    this.graphic.setStyle({
                        label: {
                            font_family: data
                        }
                    })
                    this.coverageEdit()
                }
            }
        },
        'postData.label.font_size': {
            immediate: false,
            handler: function(data) {
                // 字体大小
                if (this.isShow) {
                    this.graphic.setStyle({
                        label: {
                            font_size: data
                        }
                    })
                    this.coverageEdit()
                }
            }
        },
        'postData.label.color': {
            immediate: false,
            handler: function(data) {
                // 字体颜色
                if (this.isShow) {
                    this.graphic.setStyle({
                        label: {
                            color: data
                        }
                    })
                    this.coverageEdit()
                }
            }
        },
        'postData.label.distanceShow': {
            immediate: false,
            handler: function(data) {
                // 是否显示：
                if (this.isShow) {
                    if (data == false) {
                        this.graphic.setStyle({
                            label: {
                                opacity: 0.0
                            }
                        })
                    } else {
                        this.graphic.setStyle({
                            label: {
                                opacity: 1.0
                            }
                        })
                    }
                    this.coverageEdit()
                }
            }
        },
        'postData.specification': {
            immediate: false,
            handler: function(data) {
                // 标绘规格
                if (this.isShow) {
                    this.graphic.setStyle({
                        label: {
                            text: data
                        }
                    })
                    this.coverageEdit()
                }
            }
        },
        movePoint: {
            immediate: true,
            handler: function(data) {
                if (this.movePoint) {
                    this.coverageEdit(data, 'positions')
                }
            }
        }
    },
    created() {
        // 初始化树形菜单
        setTimeout(() => {
            const a = JSON.stringify(treeData)
            // console.log(treeData, 'treeData')
            let b = JSON.parse(a)
            b = this.removeChildData(b)
            this.cascader.layer = this.removeChild(b)
            console.log(this.postData)
        }, 1500)
    },
    mounted() {},
    methods: {
        submitStatistical() {
            if (this.isBatch.width === 2) {
                delete this.postData.width
            }
            if (this.isBatch.outlineWidth === 2) {
                delete this.postData.outlineWidth
            }
            if (this.isBatch.opacity === 2) {
                delete this.postData.opacity
            }
            console.log(this.postData)
            if (this.postData.distanceShow === true) {
                this.postData.label.opacity = 1.0
            } else if (this.postData.distanceShow === false) {
                this.postData.label.opacity = 0.0
            } else if (this.postData.distanceShow == undefined) {
                delete this.postData.label
            }
            const a = {}
            a.style = this.postData
            if (a.style.color != '') {
                a.style.label = {}
                a.style.label.color = a.style.color
            }
            a.folderId = this.postData.layer
            a.drawType = this.postData.type
            delete this.postData.layer
            delete this.postData.type
            this.$request
                .postForm('/api/map/draw/getBatchDraw', {
                    data: JSON.stringify(a)
                })
                .then(res => {
                    if (res.code == 200) {
                        this.$store.commit('setSingleProperty')
                        this.isBatch.outlineWidth = 2
                        this.isBatch.width = 2
                        this.isBatch.opacity = 2
                        cMenu.clearGraphicLayer()
                    }
                })
        },
        changeSlider(e) {
            if (this.dialogVisible) {
                this.isBatch[e.prop] = 1
            }
        },
        blurName(e) {
            // 修改
            if (e != '') {
                this.graphic.options.style.name = e.e
                this.coverageEdit('', 'name')
            }
        },
        coverageEdit(e, prop) {
            try {
                const addData = this.graphic.toJSON()
                // console.log(addData)
                // return
                addData.name = this.graphic.options.style.name
                if (prop == 'layer') {
                    addData.pid = e
                    // console.log(addData.pid, 'pidddddd')
                }
                if (prop == 'name') {
                    addData.pid = editorware.drawingId
                } else {
                    addData.name = ''
                    // addData.pid = editorware.drawingId
                }
                if (prop == 'positions') {
                    addData.positions = e.positions
                }
                this.$request
                    .postForm('/api/map/draw/modifyPlotDataById', {
                        drawQueryString: JSON.stringify(addData)
                    })
                    .then(res => {
                        if (res.code == 200) {
                            if (prop == 'layer') {
                                editorware.treeObj.getNode(res.data.id).data.pid = res.data.pid
                                const node = editorware.treeObj.getNode(res.data.id)
                                // console.log(node, 'node')
                                editorware.treeObj.remove(node)
                                // console.log(editorware.treeObj.getNode(res.data.pid), 'pid')
                                editorware.treeObj.append(node.data, editorware.treeObj.getNode(res.data.pid))
                                editorware.treeObj.getNode(res.data.pid).expanded = true
                                if (node.data.show) {
                                    editorware.treeObj.setChecked(node.data, true, false)
                                }
                                // coverageVm.coverageKey = new Date().getTime()
                            } else if (prop == 'name') {
                                this.postData.label.name = this.graphic.options.style.name
                                editorware.treeObj.getNode(res.data.id).data.name = res.data.name
                                this.graphic.name = this.graphic.options.style.name
                            }
                            this.graphic.setStyle(res.data.style)
                            addData.image = ''
                            addData.style.label.text = ''
                            switch (addData.type) {
                                case 'box':
                                    modify(addData.style, 'box')
                                    break
                                case 'billboard':
                                    modify(addData.style, 'marker')
                                    break
                                case 'polygon':
                                    modify(addData.style, 'plane')
                                    break
                                case 'circle':
                                    modify(addData.style, 'ellipse')
                                    break
                                default:
                                    break
                            }
                            editorware.coverageMap.set(graphicId, this.graphic)
                        }
                    })
            } catch (error) {}
        },
        imageUrl(data) {
            // 改变绘标图案(注意specifications末尾s)
            this.postData.image = data.iconUrl
            this.postData.specification = data.specifications
            // this.postData.text = data.text

            this.graphic.setStyle({
                image: data.iconUrl,
                label: {
                    text: data.specifications,
                    specification: data.specifications
                }
            })
            this.coverageEdit()
        },
        singlePropertyData() {
            // 绘标数据回显
            // return
            // let box = document.getElementById('box')
            if (this.graphic.options.style.rotationDegree == undefined && this.type == 'billboard') {
                this.graphic.options.style.rotationDegree = 0 // 旋转角度默认0
            }
            if (this.graphic.options.style.rotationDegree == undefined && this.type == 'rectangle') {
                this.graphic.options.style.rotationDegree = 0 // 旋转角度默认0
            }
            const t = JSON.stringify(this.graphic.options.type)
            this.type = JSON.parse(t)
            let a = JSON.stringify(this.graphic.options.style)
            a = JSON.parse(a)
            // console.log(a, '1111111111111')
            if (a.area1) {
                a.area = parseFloat(a.area1).toFixed(2)
            }
            if (a.distance) {
                a.distance = parseFloat(a.distance).toFixed(2)
            }
            // if(this.postData.label){
            //     this.postData.label = JSON.parse(JSON.stringify(this.postData.label).replace(/color/g,"font_color"));
            //     this.postData.label = JSON.parse(JSON.stringify(this.postData.label).replace(/text/g,"font_text"));
            //     this.postData.label = JSON.parse(JSON.stringify(this.postData.label).replace(/opacity/g,"font_opacity",));
            //     delete this.postData.label.outline
            //     delete this.postData.label.outlineColor
            //     Object.assign(this.postData,this.postData.label);

            //     delete this.postData.label
            // }
            if (this.type == 'billboard') {
                this.$set(a.label, 'name', a.name)
            }
            this.$set(a, 'specification', a.label.specification)
            a.type = this.type

            // 单位默认平方米
            if (a.areaUnit == undefined) {
                a.areaUnit = '1'
            }
            if (a.tiltAreaUnit == undefined) {
                a.tiltAreaUnit = '1'
            }

            if (this.graphic.options.style.tilt) {
                a.tilt = this.graphic.options.style.tilt
            } else {
                a.tilt = '100'
            }
            a.type = this.graphic.options.type
            const ctl = parseFloat(a.distance) * (parseFloat(a.tilt) * 0.01) // 默认计算施工长度：
            // a.constructionLength = this.formatInt(ctl, 1, true).toFixed(0)
            a.constructionLength = ctl.toFixed(2)

            if (a.type == 'box') {
                a.length = a.dimensions_x
                a.width = a.dimensions_y
                a.height = a.dimensions_z
                a.rotationDegree = a.heading
                a.volume = a.length * a.width * a.height
            } else if (a.type == 'ellipse') {
                // 计算圆柱体积
                a.volume = (3.14 * a.semiMinorAxis * a.semiMajorAxis * a.height).toFixed(2)
            }
            // console.log(a)
            // return
            if (a.materialType && a.type != 'polyline') {
                // 判断是否填充
                if (a.fill) {
                    this.$set(a, 'fill', true)
                }
            } else {
                this.$set(a, 'fill', false)
            }
            if (a.label.opacity != 0.0) {
                // 通过透明度判断是否显示
                a.distanceShow = true
            }
            const node = editorware.treeObj.getNode(this.graphic.id) // 获取图层信息
            // console.log(node, 'node')
            a.layer = node.parent.data.id

            const bus = JSON.stringify(a)
            this.postData = JSON.parse(bus)

            if (this.type == 'polygon') {
                this.unit('tiltArea', this.postData.tiltAreaUnit)
                this.unit('area', this.postData.areaUnit)
            }
            // console.log(this.postData,'112233');
            if (this.type == 'curve' || this.type == 'polyline') {
                this.graphic.setStyle({
                    label: { text: this.postData.constructionLength + ' m' }
                })
            }
            if (this.type == 'rectangle' || this.type == 'circle') {
                let x = this.graphic.outlineCoordinates[0] //计算矩形长宽
                let y = this.graphic.outlineCoordinates[2]
                var from = turf.point([x[0], x[1]])
                var to = turf.point([x[0], y[1]])
                var options = { units: 'miles' }
                var xData = turf.rhumbDistance(from, to, options) * 1609.34
                var from = turf.point([x[0], x[1]])
                var to = turf.point([y[0], x[1]])
                var options = { units: 'miles' }
                var yData = turf.rhumbDistance(from, to, options) * 1609.34
                this.postData.length = yData.toFixed(2)
                this.postData.width = xData.toFixed(2)

                this.unit('area', this.postData.areaUnit)
                this.graphic.setStyle({
                    label: { text: this.postData.area + (this.postData.areaUnit == '0' ? '亩' : this.postData.areaUnit == '1' ? '㎡' : '公顷') }
                })
            }
            if (this.type == 'billboard') {
                // 为图标点billboard时只设置label的text内容
                this.graphic.setStyle({
                    label: { text: this.postData.label.text }
                })
            }
        },
        menuShow() {
            if (this.$store.state.menuIcon) {
                this.$store.state.menuIcon = false
            } else {
                this.$store.state.menuIcon = true
            }
        },
        blurUnit(data, unit, prop) {
            // 输入框监听事件
            // console.log(data, unit, prop)
            if (this.dialogVisible && data.prop == 'allTilt') {
                if (this.type == 'polyline' || this.type == 'curve') {
                    const val = this.postData.allDistance * (data.e * 0.01) // (投影长度*倾斜比例)
                    this.$set(this.postData, 'allConstructionLength', val.toFixed(2))
                } else if (this.type == 'polygon') {
                    const val = this.postData.allArea * (data.e * 0.01) // (投影长度*倾斜比例)
                    this.$set(this.postData, 'allConstructionArea', val.toFixed(2))
                }
            }
            if (this.isShow) {
                if (data.prop == 'tilt') {
                    // 计算倾斜比例
                    this.graphic.setStyle({
                        tilt: data.e
                    })
                    if (this.type == 'curve' || this.type == 'polyline') {
                        if (unit == undefined) {
                            const val = this.graphic.options.style.distance * (data.e * 0.01) // (投影长度*倾斜比例)
                            // val = this.formatInt(val, 1, true).toFixed(2)
                            this.$set(this.postData, 'constructionLength', val.toFixed(2))
                        } else if (unit && prop) {
                            let val = this.graphic.options.style.distance * (data.e * 0.01) // (投影长度*倾斜比例)
                            val = (val * unit).toFixed(2)
                            this.$set(this.postData, 'constructionLength', val)
                        }
                        this.graphic.setStyle({
                            label: { text: this.postData.constructionLength + ' m' }
                        })
                    } else if (this.type == 'polygon') {
                        if (unit == undefined) {
                            const val = this.graphic.options.style.area * (data.e * 0.01)
                            this.$set(this.postData, 'tiltArea', val.toFixed(2))
                            this.unit('tiltArea', this.postData.tiltAreaUnit)
                        } else if (unit && prop) {
                            let val = this.graphic.options.style.area1 * (data.e * 0.01)
                            val = (val * unit).toFixed(2)
                            this.$set(this.postData, 'tiltArea', val)
                        }
                    }
                    this.coverageEdit()
                } else if (data.prop == 'length' || data.prop == 'width' || data.prop == 'height' || data.prop == 'rotationDegree') {
                    // 计算体积
                    const val = this.postData.length * this.postData.width * this.postData.height
                    this.refresh1 = false
                    this.$set(this.postData, 'volume', val)
                    setTimeout(() => {
                        this.refresh1 = true
                    }, 1)
                    if (this.type == 'box') {
                        // 监听交互
                        this.graphic.setStyle({
                            dimensions_x: this.postData.length,
                            dimensions_y: this.postData.width,
                            dimensions_z: this.postData.height,
                            heading: this.postData.rotationDegree
                        })
                        this.coverageEdit()
                    }
                } else if (data.prop == 'distanceShow') {
                    if (data.e == false) {
                        this.graphic.setStyle({
                            label: { opacity: 0.0 }
                        })
                    } else {
                        this.graphic.setStyle({
                            label: { opacity: 1.0 }
                        })
                    }
                    this.coverageEdit()
                } else if (data.prop == 'layer') {
                    const index = data.e.length - 1
                    this.coverageEdit(data.e[index], 'layer')
                }
            }
        },
        changeUnit(data) {
            // 改变单位监听
            // console.log(data)
            if (data.prop == 'area' && this.postData.area) {
                this.unit(data.prop, data.e)
            } else if (data.prop == 'tiltArea' && this.postData.tiltArea) {
                this.unit(data.prop, data.e)
            }
        },
        unit(prop, unit) {
            if (prop == 'tiltArea') {
                this.graphic.setStyle({
                    tiltAreaUnit: unit
                })
                const data = { e: this.postData.tilt, prop: 'tilt' }
                if (unit == '0') {
                    this.blurUnit(data, 0.0015, prop)
                    this.graphic.setStyle({
                        label: {
                            text: this.postData.tiltArea + '亩'
                        }
                    })
                } else if (unit == '1') {
                    this.blurUnit(data, 1, prop)
                    this.graphic.setStyle({
                        label: {
                            text: this.postData.tiltArea + '㎡'
                        }
                    })
                } else if (unit == '2') {
                    this.blurUnit(data, 0.0001, prop)
                    this.graphic.setStyle({
                        label: {
                            text: this.postData.tiltArea + '公顷'
                        }
                    })
                }
            } else if (prop == 'area') {
                this.graphic.setStyle({
                    areaUnit: unit
                })
                this.postData.areaUnit = unit
                if (unit == '0') {
                    this.postData.area = (this.postData.area1 * 0.0015).toFixed(2)
                } else if (unit == '1') {
                    this.postData.area = this.postData.area1.toFixed(2)
                } else if (unit == '2') {
                    this.postData.area = (this.postData.area1 * 0.0001).toFixed(2)
                }
                if (this.type == 'rectangle' || this.type == 'circle') {
                    // this.graphic.options.style.area = this.postData.area
                    // editorware.coverageMap.set(graphicId, this.graphic)
                    this.graphic.setStyle({
                        label: {
                            text: this.postData.area + (unit == '0' ? '亩' : unit == '1' ? '㎡' : '公顷')
                        }
                    })
                }
                // console.log(editorware.coverageMap.get(graphicId), 'set后')
            }
        },
        setCoverage() {
            this.$store.commit('setSingleProperty')
        },
        removeChild(data) {
            // 树形递归删除最后children
            data.forEach((item, index) => {
                if (item.children && item.children.length != 0) {
                    this.removeChild(item.children)
                } else {
                    delete item.children
                }
            })
            return data
        },
        removeChildData(data) {
            data.forEach((item, index) => {
                if (item.type == 'folder' && item.children != null) {
                    this.removeChildData(item.children)
                } else {
                    data.splice(index, 1)
                }
            })
            return data
        },
        // 移动对话框
        mousedown(e) {
            mousedown(e, 'singleProperty', 'left')
        },
        mouseup() {
            mouseup()
        },
        formatInt(num, prec, ceil) {
            // 取整
            const len = String(num).length
            if (len <= prec) {
                return num
            }

            const mult = Math.pow(10, prec)
            return ceil ? Math.ceil(num / mult) * mult : Math.floor(num / mult) * mult
        }
    }
}
</script>
<style lang="scss" scoped>
.attribute_title {
    height: 30px;
    color: #ffffff;
    line-height: 25px;
    background: rgba(32, 160, 255, 0.3);
    padding: 0 10px;
    span {
        cursor: pointer;
        font-size: 20px;
        margin-right: 10px;
    }
}
.propertyDiv {
    margin-bottom: 25px;
}
.btn_footer {
    position: absolute;
    bottom: 2px;
    .btn_item {
        width: 245px;
        margin-left: 5px;
        background: rgba(32, 160, 255, 0.3);
        color: #ffffff;
    }
}
.coverage {
    position: fixed;
    width: 260px;
    height: calc(100vh - 70px);
    min-height: 130px;
    top: 48px;
    left: 10px;
    z-index: 1000;
    background: rgba(30, 36, 50, 1);
    border-color: rgba(32, 160, 255, 0.3);
    border: 1px solid;
    border-radius: 2px;

    .coverageTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(32, 160, 255, 0.3);
        display: flex;
        justify-content: space-between;
        padding: 0 15px 0 10px;
        align-items: center;
        cursor: move;
        .coverageTitleName {
            color: #ffffff;
            font-size: 12px;
            .btnsImages {
                width: 13px;
                height: 13px;
                vertical-align: middle;
            }
        }
        .closeIcon {
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
        }
    }
    .propertyBox {
        padding: 2px;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden;
        .el-scrollbar {
            width: 100%;
            height: calc(100% + 1px);
        }
    }
    .billboard_img {
        width: 50px;
        height: 50px;
    }
}
</style>
